<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazy</title>
</head>
<body>
<a href="http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html"></a>
<a href="https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues/10"></a>
<script>
    //传统方法用scroll监听事件，调用目标元素的getBoundingClientRect(
    //得到他对应于视口左上角的坐标，呃呃呃，我好想刚开始试过这种
    //这种方法缺点，由于scroll事件密集发生，计算量大，（but为啥不用函数节流）
    //多了一种新的API
    //var io=new IntersectionObserver(callback,option);

    //是浏览器原生提供的构造函数，option是配置对象
    //构造器的返回值是一个观察者实例，实例observe的方法可以指定观察那个DOM节点
    //开始观察
    //io.observe(document.getElementById('example'));
    //停止观察
    //io.unobserve(element);
    //关闭观察期
    //io.disconnect();
    //callback一般会触发两次，一次是进入是口的时候，另一次是完全离开视口
    //实现懒加载
    function query(selector){
        return Array.from(document.querySelectorAll(selector));
    }

    var observer=new IntersectionObserver(function(changes){
        changes.forEach(function(change){
            var container=change.target;
            var content=container.querySelector("template").content;
            container.appendChild(content);
            observer.unobserve(container);
        })
    });

    query('.lazy-loaded').forEach(function(item){
        observer.observe(item);
    })
</script>
</body>
</html>